{% extends 'base.html' %}
{% load static %}

{% block title %}
    用户个人信息主页
{% endblock %}

{% block css %}
    <style>
        #form-field-username {
            width: 30%;
        }
    </style>
{% endblock %}

{% block breadcrumb %}
    <li>
        <i class="icon-home home-icon"></i>
        <a href="{% url 'index' %}">首页</a>
    </li>
    <li class="active">个人中心</li>
{% endblock %}

{% block page-header %}
    <h1>
        个人中心
        <small class="username">
            <i class="ui-icon-person green"></i>
        </small>
    </h1>
{% endblock %}

{% block page-content %}
    <!-- PAGE CONTENT BEGINS -->

    <div class="clearfix">
        <!-- 这个好像是进行排版好看用的 -->
        <div class="pull-left no-margin"></div>
        <!-- 进行用户信息的浏览以及用户信息的编辑 -->
        <div class="pull-right">
            <div class="btn-toolbar inline middle no-margin">
                <div data-toggle="buttons" class="btn-group no-margin">
                    <label class="btn btn-sm btn-yellow active">
                        <span class="bigger-110">用户信息</span>

                        <input type="radio" value="1" />
                    </label>

                    <label class="btn btn-sm btn-yellow">
                        <span class="bigger-110">编辑</span>

                        <input type="radio" value="2" />
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="hr dotted"></div>

    <div>
        <div id="user-profile-1" class="user-profile row">
            <div class="col-xs-12 col-sm-3 center">
                <div>
        <span class="profile-picture">
            <img id="avatar" class="editable img-responsive" alt="Alex's Avatar" src="" />
        </span>

        <div class="space-4"></div>

        <div class="width-80 label label-info label-xlg arrowed-in arrowed-in-right">
            <div class="inline position-relative">
                <a href="#" class="user-title-label dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-circle light-green middle"></i>
                    &nbsp;
                    <span class="white"></span>
                </a>

                <ul class="align-left dropdown-menu dropdown-caret dropdown-lighter">
                    <li class="dropdown-header"> Change Status </li>

                    <li>
                        <a href="#">
                            <i class="icon-circle green"></i>
                            &nbsp;
                            <span class="green">Available</span>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <i class="icon-circle red"></i>
                            &nbsp;
                            <span class="red">Busy</span>
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <i class="icon-circle grey"></i>
                            &nbsp;
                            <span class="grey">Invisible</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
                <div class="space-6"></div>
                <div class="profile-contact-info">
        <div class="profile-contact-links align-left">
            <a class="btn btn-link" href="#">
                <i class="icon-plus-sign bigger-120 green"></i>
                Add as a friend
            </a>

            <a class="btn btn-link" href="#">
                <i class="icon-envelope bigger-120 pink"></i>
                Send a message
            </a>

            <a class="btn btn-link" href="#">
                <i class="icon-globe bigger-125 blue"></i>
                www.alexdoe.com
            </a>
        </div>

        <div class="space-6"></div>

        <div class="profile-social-links center">
            <a href="#" class="tooltip-info" title="" data-original-title="Visit my Facebook">
                <i class="middle icon-facebook-sign icon-2x blue"></i>
            </a>

            <a href="#" class="tooltip-info" title="" data-original-title="Visit my Twitter">
                <i class="middle icon-twitter-sign icon-2x light-blue"></i>
            </a>

            <a href="#" class="tooltip-error" title="" data-original-title="Visit my Pinterest">
                <i class="middle icon-pinterest-sign icon-2x red"></i>
            </a>
        </div>
    </div>
                <div class="hr hr12 dotted"></div>
                <div class="clearfix">
        <div class="grid2">
            <span class="bigger-175 blue">25</span>

            <br />
            Followers
        </div>

        <div class="grid2">
            <span class="bigger-175 blue">12</span>

            <br />
            Following
        </div>
    </div>
                <div class="hr hr16 dotted"></div>
            </div>
            <div class="col-xs-12 col-sm-9">
                <div class="center">
                    <span class="btn btn-app btn-sm btn-light no-hover">
                        <span class="line-height-1 bigger-170 blue"> 1,411 </span>
                        <br />
                        <span class="line-height-1 smaller-90"> Views </span>
                    </span>
                    <span class="btn btn-app btn-sm btn-yellow no-hover">
                        <span class="line-height-1 bigger-170"> 32 </span>
                        <br />
                        <span class="line-height-1 smaller-90"> Followers </span>
                    </span>
                    <span class="btn btn-app btn-sm btn-pink no-hover">
                        <span class="line-height-1 bigger-170"> 4 </span>
                        <br />
                        <span class="line-height-1 smaller-90"> Projects </span>
                    </span>
                    <span class="btn btn-app btn-sm btn-grey no-hover">
                        <span class="line-height-1 bigger-170"> 23 </span>

                        <br />
                        <span class="line-height-1 smaller-90"> Reviews </span>
                    </span>

                    <span class="btn btn-app btn-sm btn-success no-hover">
                        <span class="line-height-1 bigger-170"> 7 </span>

                        <br />
                        <span class="line-height-1 smaller-90"> Albums </span>
                    </span>

                    <span class="btn btn-app btn-sm btn-primary no-hover">
                        <span class="line-height-1 bigger-170"> 55 </span>

                        <br />
                        <span class="line-height-1 smaller-90"> Contacts </span>
                    </span>
                </div>

    <div class="space-12"></div>

    <div class="profile-user-info profile-user-info-striped">
        <div class="profile-info-row">
            <div class="profile-info-name"> Username </div>

            <div class="profile-info-value">
                <span class="editable" id="username">alexdoe</span>
            </div>
        </div>

        <div class="profile-info-row">
            <div class="profile-info-name"> Location </div>

            <div class="profile-info-value">
                <i class="icon-map-marker light-orange bigger-110"></i>
                <span class="editable" id="country">Netherlands</span>
                <span class="editable" id="city">Amsterdam</span>
            </div>
        </div>

        <div class="profile-info-row">
            <div class="profile-info-name"> Age </div>

            <div class="profile-info-value">
                <span class="editable" id="age">38</span>
            </div>
        </div>

        <div class="profile-info-row">
            <div class="profile-info-name"> Joined </div>

            <div class="profile-info-value">
                <span class="editable" id="signup">20/06/2010</span>
            </div>
        </div>

        <div class="profile-info-row">
            <div class="profile-info-name"> Last Online </div>

            <div class="profile-info-value">
                <span class="editable" id="login">3 hours ago</span>
            </div>
        </div>

        <div class="profile-info-row">
            <div class="profile-info-name"> About Me </div>

            <div class="profile-info-value">
                <span class="editable" id="about">Editable as WYSIWYG</span>
            </div>
        </div>
    </div>

    <div class="space-20"></div>

    <div class="hr hr2 hr-double"></div>

    <div class="space-6"></div>

    </div>
        </div>
    </div>

    <div class="hide">
        <div id="user-profile-2" class="user-profile row">
            <div class="col-sm-offset-1 col-sm-10">
                <div class="well well-sm">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    &nbsp;
                    <!-- 当前表单填写情况 -->
                    <div class="inline middle blue bigger-110"></div>

                    &nbsp; &nbsp; &nbsp;
                    <!-- 当前表单填写情况 -->
                    <div style="width:200px;" data-percent="70%" class="inline middle no-margin progress progress-striped active">
                        <div class="progress-bar progress-bar-success" style="width:70%"></div>
                    </div>
                </div><!-- /well -->

                <div class="space"></div>

                <form class="form-horizontal" onsubmit="return false" action="##" method="post">
                    <div class="tabbable">
                        <ul class="nav nav-tabs padding-16">
                            <li class="active">
                                <a data-toggle="tab" href="#edit-basic">
                                    <i class="green icon-edit bigger-125"></i>
                                    编辑基本信息
                                </a>
                            </li>

                            <li>
                                <a data-toggle="tab" href="#edit-password">
                                    <i class="blue icon-key bigger-125"></i>
                                    修改密码
                                </a>
                            </li>
                        </ul>

                        <div class="tab-content profile-edit-tab-content">
                            <div id="edit-basic" class="tab-pane in active">
                                <h4 class="header blue bolder smaller">个人信息</h4>

{#                                    <div class="col-xs-12 col-sm-4">#}
{#                                        <input type="file" />#}
{#                                    </div>#}

                                <div class="vspace-xs"></div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-username">用户名</label>

                                    <div class="col-sm-9">
                                        <input class="col-xs-12 col-sm-10" type="text" id="form-field-username" placeholder="Username" name="username" />
                                    </div>
                                </div>

                                <div class="space-4"></div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-first">真实姓名</label>

                                    <div class="col-sm-9">
                                        <input class="input-small" type="text" id="form-field-first" placeholder="First Name" name="first_name" />
                                        <input class="input-small" type="text" id="form-field-last" placeholder="Last Name" name="last_name" />
                                    </div>
                                </div>

                                <hr />
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-date">出生日期</label>

                                    <div class="col-sm-9">
                                        <div class="input-medium">
                                            <div class="input-group">
                                                <input class="input-medium date-picker" id="form-field-date" type="text"
                                                       data-date-format="yyyy-mm-dd" placeholder="dd-mm-yyyy" name="birthday" />
                                                <span class="input-group-addon">
                                                    <i class="icon-calendar"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="space-4"></div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right">性别</label>

                                    <div class="col-sm-9">
                                        <label class="inline">
                                            <input name="form-field-radio" type="radio" class="ace" />
                                            <span class="lbl"> Male</span>
                                        </label>

                                        &nbsp; &nbsp; &nbsp;
                                        <label class="inline">
                                            <input name="form-field-radio" type="radio" class="ace" />
                                            <span class="lbl"> Female</span>
                                        </label>
                                    </div>
                                </div>

                                <div class="space-4"></div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-comment">个人简介</label>

                                    <div class="col-sm-9">
                                        <textarea id="form-field-comment" name="user-comment"></textarea>
                                    </div>
                                </div>

                                <div class="space"></div>
                                <h4 class="header blue bolder smaller">Contact</h4>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-email">个人邮箱</label>

                                    <div class="col-sm-9">
                                        <span class="input-icon input-icon-right">
                                            <input type="email" id="form-field-email" name="email" />
                                            <i class="icon-envelope"></i>
                                        </span>
                                    </div>
                                </div>

                                <div class="space-4"></div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-website">个人网址</label>

                                    <div class="col-sm-9">
                                        <span class="input-icon input-icon-right">
                                            <input type="url" id="form-field-website" name="user-website" />
                                            <i class="icon-globe"></i>
                                        </span>
                                    </div>
                                </div>

                                <div class="space-4"></div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-phone">Phone</label>

                                    <div class="col-sm-9">
                                        <span class="input-icon input-icon-right">
                                            <input class="input-medium input-mask-phone" type="text" id="form-field-phone" name="email" />
                                            <i class="icon-phone icon-flip-horizontal"></i>
                                        </span>
                                    </div>
                                </div>

                                <div class="space"></div>
                                <h4 class="header blue bolder smaller">Social</h4>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-facebook">Facebook</label>

                                    <div class="col-sm-9">
                                        <span class="input-icon">
                                            <input type="text" value="facebook_alexdoe" id="form-field-facebook" />
                                            <i class="icon-facebook blue"></i>
                                        </span>
                                    </div>
                                </div>

                                <div class="space-4"></div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-twitter">Twitter</label>

                                    <div class="col-sm-9">
                                        <span class="input-icon">
                                            <input type="text" value="twitter_alexdoe" id="form-field-twitter" />
                                            <i class="icon-twitter light-blue"></i>
                                        </span>
                                    </div>
                                </div>

                                <div class="space-4"></div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-gplus">Google+</label>

                                    <div class="col-sm-9">
                                        <span class="input-icon">
                                            <input type="text" value="google_alexdoe" id="form-field-gplus" />
                                            <i class="icon-google-plus red"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>


                            <div id="edit-password" class="tab-pane">
                                <div class="space-10"></div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-pass1">旧密码</label>

                                    <div class="col-sm-9">
                                        <input type="password" id="form-field-pass1" name="old_pass" />
                                    </div>
                                </div>

                                <div class="space-4"></div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-pass2">新密码</label>

                                    <div class="col-sm-9">
                                        <input type="password" id="form-field-pass2" name="new_pass" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-pass2">确认密码</label>

                                    <div class="col-sm-9">
                                        <input type="password" id="form-field-pass3" name="rept_new_pass" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="clearfix form-actions">
                        <div class="col-md-offset-3 col-md-9">
                            <button class="btn btn-info" type="submit" onclick="user_profile_edit()">
                                <i class="icon-ok bigger-110"></i>
                                提交
                            </button>

                            &nbsp; &nbsp;
                            <button class="btn" type="reset">
                                <i class="icon-undo bigger-110"></i>
                                重置
                            </button>
                        </div>
                    </div>
{#                    {% csrf_token %}#}
                </form>
            </div><!-- /span -->
        </div><!-- /user-profile -->
    </div>
    <!-- PAGE CONTENT ENDS -->
{% endblock %}

{% block js %}
    <script type="text/javascript" src="{% static 'assets/my_js/profile.js' %}"></script>
{% endblock %}